<template>
    <div class="CollapseContent">
        <div v-for="field in fieldList" :key="field">
            <Field 
            :field="field" 
            :sheetName="sheetName"
            v-on:change-field-name="changeFieldName"
            v-on:remove-field="removeField"></Field>
        </div>
    </div>
</template>

<script>
import Field from '@/components/common/Field.vue'
export default {
    components:{Field},
    props:['fieldList', 'sheetName'],
    data(){
        return{
            
        }
    },
    methods:{
        changeFieldName(field, newField){
            let data = {
                sheetName: this.sheetName,
                oldField: field,
                newField: newField,
            }

            this.$axios.post('/changeFieldName', data)
            .then(res => {
                if(res.code == 200){
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })

                    this.$store.commit('changeFieldName', data)
                }
                else{
                    this.$message.error(res.msg)
                }
            })
        },
        removeField(field){
            let data = {
                "sheetName" : this.sheetName,
                "fieldName" : field,
            }
            this.$axios.post('/delField', data)
            .then(res => {
                if(res.code == 200){
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })

                    this.$store.commit('removeField', res.data)
                }
                else{
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style scoped>

</style>

